<!-- 角色列表 -->
<template>
  <div class="system-role-box">
    <div class="header">
      <router-link to="/dashboard/system/role/add">
        <el-button size="small" type="primary">添加路由</el-button>
      </router-link>
    </div>
    <div class="content">
      <el-table :data="routerList" style="width: 100%" v-loading="getLoading">
        <el-table-column label="#" width="80" type="index"></el-table-column>
        <!-- <el-table-column label="ID" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="权限ID" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.scope_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="路由名称" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="路由路径" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.path }}</span>
          </template>
        </el-table-column>
        <el-table-column label="路由组件" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.component }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="routeChild(scope.$index, scope.row)">查看子路由</el-button>
            <el-button size="mini" @click="routeEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="routeDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {mapMutations , mapGetters} from 'vuex'
export default {
  inject: ['reload'],
  data () {
    return {
      routerList: []
    }
  },
  computed: {
    ...mapGetters('systemuser', [
      'getLoading'
    ])
  },
  created () {
    this.$http.getRouteList().then(res => {
      console.log(res)
      if (res && res.data.code == 200) {
        this.routerList = res.data.data
        this.setLoading(false)
      }
      
    })
  },
  methods: {
    ...mapMutations('systemuser', [
      'setLoading'
    ]),
    routeChild(index,item){
      // console.log(123)
      // this.$router.push('/dashboard/system/route/child')
    },
    routeEdit (index, item) {
      this.$router.push("/dashboard/system/route/edit");
      console.log(item)
      // this.setCurrentRole(item)
    },
    routeDelete (index, item) {
      // console.log('删除操作。。',row)
      this.$confirm("此操作将删除该路由, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.removeRoute({ id: item.id }).then(res => {
            console.log(res);
            if (res && res.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped lang="less">
.system-role-box {
  background: #fff;
  border-radius: 2px;
  .header {
    border-bottom: 1px solid #f6f6f6;
    button {
      margin: 20px 0px 10px 15px;
    }
  }
  .content {
    padding: 0 20px;
    .body {
      margin: 8px 0;
    }
  }
  .el-pagination {
    padding: 20px 0px 25px 15px;
    // text-align: center;
  }
}
</style>
